<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 过渡属性 */
            transition: all 1s cubic-bezier(0.59, 0.02, 0, 1) 0s;
            /* safari兼容 */
            -webkit-transition: all 1s cubic-bezier(0.59, 0.02, 0, 1) 0s;
            /* f12 在浏览器中选择box可以看到曲线 可以调试 然后直接复制过来取代ease的部分 */

        }
        .box:hover {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 动画效果 -->
    <!-- 
        过渡属性 transition
        使用:hover切换状态
        transition: 过渡的属性 过渡时间 运动曲线 延时时间;
            transition-property 规定应用过渡的css属性名称
                none 表示没有属性过渡
                all 表示所有变化的属性都过渡
            transition-duration 过渡效果花费的时间 默认是0
                以秒s为单位 0s也要加s
            transition-timing-function 过渡效果的时间曲线 默认是ease
                linear 相同速度 匀速
                ease 慢开始然后变快 然后变慢 逐渐慢下来
                ease-in 慢开始 加速
                ease-out 慢结束 减速
                ease-in-out 慢开始慢结束 先加速后减速
                cubic-bezier(x1, y1, x2, y2);
                    在cubic-bezier函数中定义自己的值 x1 x2是取0-1之间的值 y1 y2任意 四个数值表示拉车的点的俩坐标
            transition-delay 过渡效果何时开始 默认是0
                以秒s为单位 0s

        IE9之前不支持
        safari有兼容问题
    -->
    <div class="box"></div>
</body>
</html>